import { EditManger } from "@/components/form/commodity/edit.order"
import { FormModal } from "@/components/modal/form.modal"
import { Field_Reset, Field_Search, Field_keyword } from "@/components/utils/field.list"
import adminOrderService from "@/services/admin.order.service"

import { StoreContext } from "@/store"
import { AsyncModal, IndexRender, BooleanRender, DateRender, FormRender, IDRender, ListTable, OperateRender } from "@whzhuke/antd"
import { useMobx } from "@whzhuke/mobx"
import { Button, Col, Row, Space } from "antd"
import { useForm } from "antd/es/form/Form"
import React, { useCallback, useContext } from "react"

const Page = useMobx(() => {
  const [form] = useForm()
  const { ListStore } = useContext(StoreContext)
  const titleRender = useCallback(() => {
    return (
      <Row justify="space-between" align="middle">
        <Col>订单列表</Col>
        <Col>
          <Space size="middle">
            <Button type="primary" onClick={EditModal()}>
              添加订单
            </Button>
          </Space>
        </Col>
      </Row>
    )
  }, [])
  const onReset = useCallback(() => ListStore.setParams(adminOrderService.list, {}), [])
  const onFinish = useCallback(data => ListStore.setParams(adminOrderService.list, data), [])
  const EditModal = useCallback(
    (val?, item?) => async () => {
      const done = await AsyncModal({
        content: FormModal,
        params: {
          formEle: EditManger,
          formProps: {
            values: item
          },
          title: item ? "编辑订单" : "新增订单"
        }
      })
      if (done) {
        ListStore.updateList(adminOrderService.list)
      }
    },
    []
  )
  const DeleteItem = useCallback(
    val => () => {
      adminOrderService.del({ ids: [val] }).then(() => {
        ListStore.updateList(adminOrderService.list)
      })
    },
    []
  )

  return (
    <Row>
      <Col span={24}>
        <FormRender
          form={form}
          onReset={onReset}
          onFinish={onFinish}
          layout="inline"
          fieldList={[
            Field_keyword,
            {
              fieldType: "rangeDate"
            },
            Field_Search,
            Field_Reset
          ]}
        />
      </Col>
      <Col span={24}>
        <ListTable
          title={titleRender}
          apiColumns={[
            IndexRender("id", 80),
            ["thumb", "订单编号"],
            ["linkContract", "关联合同"],
            ["createdBy", "创建人"],
            ["createTs", "创建时间", DateRender()],
            [
              "id",
              "操作",
              OperateRender([
                ["编辑", EditModal],
                ["删除", DeleteItem]
              ]),
              { width: 80, fixed: "right" }
            ]
          ]}
          apiService={adminOrderService.list}
        />
      </Col>
    </Row>
  )
})

export default Page
